<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      CRUD
        C - create 增 POST
        R - read   查 GET
        U - update 改 PUT（全部改）/ PATCH（部分改）
        D - delete 删 DELETE
    -->
    <button id="btn1">GET</button>
    <button id="btn2">POST</button>
    <button id="btn3">PUT</button>
    <button id="btn4">PATCH</button>
    <button id="btn5">DELETE</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script>
      document.getElementById("btn1").onclick = async function() {
        // https://github.com/typicode/json-server

        // 查询所有
        // const response = await axios({
        //   method: "GET",
        //   url: "http://localhost:3000/posts",
        // });

        // 查询一条
        // const response = await axios({
        //   method: "GET",
        //   url: "http://localhost:3000/posts/2",
        // });

        // 分页查询
        // 查询第一页五条数据
        // const response = await axios({
        //   method: "GET",
        //   url: "http://localhost:3000/posts",
        //   params: {
        //     // query参数
        //     _page: 3,
        //     _limit: 5,
        //   },
        // });

        // 搜索
        // 模糊匹配：包含关键字就好
        const response = await axios({
          method: "GET",
          url: "http://localhost:3000/posts",
          params: {
            // q: "jing", // 模糊匹配，只要包含jing就行（不管是author，还是title）
            // author: "jingge", // 全匹配
            title_like: "jingge", // 模糊匹配
          },
        });

        console.log(response.data);
      };

      document.getElementById("btn2").onclick = async function() {
        const response = await axios({
          method: "POST",
          url: "http://localhost:3000/posts",
          data: {
            // 新增数据
            // id: 1, // id不能写，一定由服务端生成
            title: "i like jingge",
            author: "peihua",
          },
        });

        console.log(response.data);
      };

      document.getElementById("btn3").onclick = async function() {
        const response = await axios({
          method: "PUT",
          url: "http://localhost:3000/posts/2",
          data: {
            // 新增数据
            // id: 1, // id不能写，一定由服务端生成
            author: "jingge",
          },
        });

        console.log(response.data);
      };

      document.getElementById("btn4").onclick = async function() {
        const response = await axios({
          method: "PATCH",
          url: "http://localhost:3000/posts/3",
          data: {
            // 新增数据
            // id: 1, // id不能写，一定由服务端生成
            author: "jingge",
          },
        });

        console.log(response.data);
      };

      document.getElementById("btn5").onclick = async function() {
        const response = await axios({
          method: "DELETE",
          url: "http://localhost:3000/posts/2",
        });

        console.log(response.data);
      };
    </script>
  </body>
</html>
